<template>
  <div>
    <div class="form_ycjy">
      <el-form class="m-t-10" ref="ruleForm" label-position="top" label-width="60px">
        <p class="datesech">
          <span class="sechsp">时间选择</span>
          <el-form-item label="" style="margin: 0px 0 5px 0">
            <el-date-picker v-model="TimeRain" type="datetimerange" prefix-icon="el-icon-date" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 99%" range-separator="至" format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timeend]" @change="selectTime(TimeRain)" />
            <!-- <span class="sechbtn" @click.stop="selectTime(TimeRain)"><i class="el-icon-search"></i></span> -->
          </el-form-item>
        </p>
      </el-form>
    </div>
    <div class="collapse_table lefttablebom">
      <ul>
        <li v-for="(item, index) in YjybDataList" :key="index" :class="{ activeList: selectNum == index }"
          @click="ListStyle(item, index)">
          <p>{{ $moment(item.Ftm).format("YYYY-MM-DD HH:mm:ss") }}</p>
          <div v-for="(DtItem, indexDt) in item.DtDeatil" :key="indexDt" v-if="DtItem.TypeName != '河道预警'">
            <p>{{ DtItem.TypeName }}信息</p>
            <div>
              <div v-for="(DtItemchild, indexchild) in DtItem.Deatil" :key="indexchild"
                :class="'warningYbyj' + DtItemchild.Lvl">
                <span class="lvnamsp1">{{ DtItemchild.Num }}</span>
                <span class="lvnamsp2" :class="'YuBaoHD' + indexchild"></span>
                <span class="lvnamsp" v-html="$options.filters.showContent(DtItemchild.LvlName)" />
                <!-- {{DtItemchild.LvlName}}  -->

              </div>
            </div>
          </div>
        </li>
        <infinite-loading ref="infiniteLoading" direction="100" @infinite="infiniteHandler_YBYJ">
          <span slot="no-more"> &nbsp; &nbsp; </span>
          <template v-if="YjybDataList.length <= 0">
            <div slot="no-results" class="noData">当前无临近预警</div>
          </template>
          <div v-else slot="no-results"> &nbsp; &nbsp;</div>
        </infinite-loading>
      </ul>
    </div>
  </div>
</template>
<script>
import {
  GetForcastWarningStatistics
} from '@/api/xuna.js'
// 预报预警模块
import YJ_LJ from '../../../../map/cesium/mixins/YJ_LJ'
export default {
  filters: {
    showContent(content) {
      if (content) {
        let str1 = content.replace(/[（]/g, '\<br>$&')
        str1 = str1.replace(new RegExp('（', 'g'), '(')
        str1 = str1.replace(new RegExp('）', 'g'), ')')
        return str1
      } else {
        return '--'
      }
    }
  },
  mixins: [YJ_LJ],
  data() {
    return {
      selectNum: -1,
      ruleForm: {
        wswscd: '',
        dtBegin: this.$store.getters.startTimeCommon,
        dtEnd: this.$store.getters.endTimeCommon,
        page: '1',
        limit: '10'
      },
      timebeg: this.$moment(this.$store.getters.startTimeCommon).format('HH:mm:ss'),
      timeend: this.$moment(this.$store.getters.endTimeCommon).format('HH:mm:ss'),
      TimeRain: [this.$store.getters.startTimeCommon, this.$store.getters.endTimeCommon],
      YjybDataList: [],
      selefNumflg: true,
    }
  },
  computed: {
    isFollow() {
      return this.$store.getters.basin
    }
  },
  watch: {
    isFollow: {
      immediate: true,
      deep: true,
      handler(val) {
        this.ruleForm.wswscd = val
        this.resetList_YBYJ()
        // this.getDataYbyj()
      }
    }

  },
  created() {
    // this.getDataYbyj()
  },
  mounted() {
    this.$nextTick(function () {
      this.$on('childmethods', function () {
        console.log('我是子组件方法')
      })
    })
  },
  methods: {
    // 加载更多
    infiniteHandler_YBYJ($state) {
      this.getDataYbyj($state)
    },
    // 重置
    resetList_YBYJ(typ) {
      this.ruleForm.page = 1
      this.YjybDataList = [];
      this.selefNumflg = typ == '1' ? false : true;
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    },
    // 点击详情
    ListStyle(item, index) {
      // 传时间
      this.$eventBus.$emit('TK_Date_Card_Click', {
        perioD_END: item.Ftm,
      })
      // console.log(item, index)
      this.selectNum = index
      // 右侧详情
      this.$eventBus.$emit('ybyjEvent', {
        strWscd: this.ruleForm.wswscd,
        TimeRain: this.TimeRain,
        ...item
      })
      this.$store.dispatch('rightFold', false)
      // 调用对应地图模块
      this.creatYJLJ(item.Ftm)
    },
    // 自定义时间
    selectTime(val) {
      if (val) {
        this.ruleForm.dtBegin = val[0]
        this.ruleForm.dtEnd = val[1]
        this.TimeRain = val
        this.$store.dispatch('startTimeCommon', val[0])
        this.$store.dispatch('endTimeCommon', val[1])
        this.resetList_YBYJ()
        // this.getDataYbyj()
        // this.resetList()
      }
    },
    // 获取临近预警数据
    getDataYbyj($state) {
      this.clearYJLJ()
      GetForcastWarningStatistics(this.ruleForm).then((res) => {
        if (res.isSuccess) {
          if ($state) {
            if (!res.data.length > 0) {
              this.$parent.$parent.$parent.infoTrue = false
              // this.$store.dispatch('rightFold', true)
              $state.complete() // 加载完成的状态
            } else {
              this.$eventBus.$emit('TK_Date_Card_Click', {
                perioD_END: res.data[0].Ftm,
              })
              const arr = res.data
              this.YjybDataList = [...this.YjybDataList, ...arr]
              if (res.data.length < this.ruleForm.limit) {
                $state.complete() // 加载完成的状态
              } else {
                $state.loaded() // 加载中的状态
              }
              if (this.ruleForm.page === 1) {
                this.selectNum = this.selefNumflg ? 0 : this.selectNum;
                this.$eventBus.$emit('ybyjEvent', {
                  strWscd: this.ruleForm.wswscd,
                  TimeRain: this.TimeRain,
                  ...res.data[this.selectNum]
                })
                this.$emit('buttonEvent')
                // 临近预警 模块构建
                this.creatYJLJ(res.data[this.selectNum].Ftm)
                this.$store.dispatch('rightFold', false)
              }
            }
            this.ruleForm.page++
          } else {
            this.YjybDataList = res.data
            // $state.complete()   //加载完成的状态
          }
        } else {
          this.$message.error(res.message)
          $state.complete() // 加载完成的状态
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.fxyj_h {
  margin: 10px 0 0 10px;

  /deep/ .el-radio-button__inner {
    padding: 10px 60px !important;
  }
}

/deep/ .el-radio-button__inner {
  padding: 10px !important;
}

.form_ycjy .el-input__inner {
  width: 80%;
}

.collapse_table {
  max-height: calc(100vh - 265px);

  ul li {
    padding-bottom: 10px;
    background: url('~@/assets/imgNew/linjin.png') no-repeat;
    background-size: 100% 100%;

    >p {
      color: #FFE957;
      padding-top: 0px;
      padding-left: 0px;
    }

    >div {
      overflow: hidden;

      >p {
        // width: 100%;
        color: #00F6FF;
        border-top: solid 1px #00A0DB;
        padding-left: 0px;
      }

      >div {
        display: flex;
        justify-content: space-between;
        padding-bottom: 5px;
        // background: rgba(0, 11, 25, 0.13);

        >div {
          width: 25%;
          text-align: center;
          line-height: 1.5;
          font-size: 16px;

          span {
            display: block;
          }
        }
      }
    }
  }

  >ul .activeList,
  >ul li:hover {

    background: url('~@/assets/imgNew/linjinact.png') no-repeat;
    background-size: 100% 100%;

  }
}

.isShowtopflg {
  .collapse_table {
    max-height: calc(100vh - 210px);
  }

}

.lefttablebom {
  width: calc(100% + 10px);
  padding-right: 5px;

}

.lvnamsp {
  line-height: 1.5;
  color: #A5C2D8;
  font-size: 12px;
}

.lvnamsp1 {
  color: #fff;
}

.lvnamsp2 {
  width: 34px;
  height: 34px;
  margin: auto;

}

.datesech {
  .sechsp {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #fff;
    opacity: 0.8;
  }

  .el-input__inner {
    border: solid 1px #1E73DC;
    background-color: #00377B;

  }

  .sechbtn {
    display: inline-block;
    width: 14%;
    height: 33px;
    margin-left: 1%;
    border-radius: 6px;
    background-color: #1E73DC;
    font-size: 18px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    line-height: 34px;
    cursor: pointer;

  }
}

.YuBaoHD0 {
  background: url('~@/assets/imgNew/YuBao1.png') no-repeat center center;
  background-size: 100% 100%;
}

.YuBaoHD1 {
  background: url('~@/assets/imgNew/YuBao2.png') no-repeat center center;
  background-size: 100% 100%;
}

.YuBaoHD2 {
  background: url('~@/assets/imgNew/YuBao3.png') no-repeat center center;
  background-size: 100% 100%;
}

.YuBaoHD3 {
  background: url('~@/assets/imgNew/YuBao5.png') no-repeat center center;
  background-size: 100% 100%;
}
</style>
